﻿// JScript File

//Column Types :
// a) Label
// b) Button
// c) Link
// d) Header 
// e) Footer
// f) Generic HTML Column
// g) Text 
/*
 * AjaxGrid.ColumnTypes.
*/


var _headerCssClass="";
var _prevSelectedRow=null;
var _currentSubDetailsRowID = null
function addHeaderRow(columnSpecifications) {
    var _headerRow = document.createElement("TR");
    for( var loopIndex =0 ;loopIndex < columnSpecifications.Columns.length ; loopIndex++ ) {
        _headerRow.appendChild( addHeaderColumn( columnSpecifications.Columns[loopIndex] ));  
    }
    return _headerRow; 
}
function addHeaderColumn(columnSpecification) {
    var _headerColumnCell = document.createElement("TH");
    if( typeof(columnSpecification.Style)!== 'undefined'  ) {
     _headerColumnCell.style.width= columnSpecification.Style.Width;
    }
    if( typeof(columnSpecification.headerCssClass)!== 'undefined'  ) {
     _headerColumnCell.className = columnSpecification.headerCssClass;
    }
    _headerColumnCell.appendChild( document.createTextNode(columnSpecification.headerName) ) ;
    return _headerColumnCell;
}

//listElementID is the Table's ID 
function BindGrid(listData,listElementID,columnSpecifications,expandSubRows,subRowDataExpression,rowTemplates){
    var parentElement = $get( listElementID );  
    
  
  //Add a new TBody
  parentElement.appendChild( document.createElement("TBODY"));
  //remove existing Rows:
  parentElement.tBodies[1].removeNode( true );
  
  var apc = parentElement.tBodies[1].appendChild;
   apc( addHeaderRow( columnSpecifications ) ); 
   for( var loopIndex=0;loopIndex < listData.length ; loopIndex++ ) {
        apc( 
            addDataRow(columnSpecifications,
                        listData[loopIndex],
                        listElementID+"row"+loopIndex,
                        expandSubRows?listData[loopIndex][subRowDataExpression]:listData[loopIndex],
                        expandSubRows) );
   }
   
   if ( listData.length === 0 ) {
    apc( renderTemplate( rowTemplates.EmptyRowTemplate ) );
   }
   
//   //add Footer 
//   //IF Footer is already generated
//   if( parentElement.tBodies.length > 2) {
//    //Remove it
//    parentElement.tBodies[0].removeNode(true );
//   }
//   parentElement.appendChild( document.createElement("TBODY"));
//   apc = parentElement.tBodies[2].appendChild;
//   
//   apc( renderTemplate( rowTemplates.FooterTemplate ) );
//   
   
}

function renderTemplate(templateSpecification) {
    var _templatedRow = document.createElement("TR");
        for( var loopIndex =0 ;loopIndex < templateSpecification.Columns.length ; loopIndex++ ) {
           var _templatedCell  = document.createElement("TD");
           _templatedCell.className = templateSpecification.CssClass; 
           if( templateSpecification["ColSpan"] !== null )  {
             _templatedCell.colSpan = templateSpecification.ColSpan; 
           }
           
            switch ( templateSpecification.Columns[loopIndex].type ) {
                    case "text" : _templatedCell.appendChild( document.createTextNode(templateSpecification.Columns[loopIndex].text) );break;
                    case "html" : _templatedCell.innerHTML = templateSpecification.Columns[loopIndex].html ;break;
            } 
           _templatedRow.appendChild( _templatedCell );  
        } 
    return _templatedRow; 
}
function addDataRow(columnSpecifications,rowData,rowId,subData,expandSubRows) {
   var _dataRow = document.createElement("TR");
   _dataRow.id = rowId;
       if( expandSubRows && subData!== null ) {
        //_dataRow.appendChild(addExpandRow(subData));
       }
    for( var loopIndex =0 ;loopIndex < columnSpecifications.Columns.length ; loopIndex++ ) {
        _dataRow.appendChild( addDataColumn( columnSpecifications.Columns[loopIndex],rowData,subData ));  
            
       }
   return _dataRow; 
}
function addDataColumn(columnSpecification,rowData,subData) {
   var _dataColumnCell = document.createElement("TD");
   var _columnText = "";
   if( columnSpecification.noAction === true ) {
        _columnText = subData.length +" "+ columnSpecification.dataText;
        var expandSubRowHandler = Function.createDelegate(this,addSubDetailsRow);
        $addHandler(_dataColumnCell,"click",expandSubRowHandler);
        _dataColumnCell._rowSubDetailData = subData; 
        _dataColumnCell._rowSubDetailTableID = columnSpecification.subDataTableId;
        _dataColumnCell._rowsubDetailsDivID = columnSpecification.subDetailsDivID;
        _dataColumnCell.style.width= columnSpecification.Style.Width;
        }
   else {
        _columnText =  rowData[columnSpecification.dataFieldName];
        
   }    
_dataColumnCell.appendChild( document.createTextNode( _columnText ) ); 
   return _dataColumnCell;
}

function addSubDetailsRow(eventArgs){
    
  eventArgs = eventArgs === null ? eventArgs : window.event;  
  
  var cellElement = eventArgs.srcElement
  var rowElement = cellElement.parentElement;
  
  selectRow( rowElement );  
  
  cellElement.className="";
  var _subDetailsData = cellElement._rowSubDetailData;
  var _tableElement   = cellElement._rowSubDetailTableID;
  var subDetailsDivID = cellElement._rowsubDetailsDivID;
  
  var currLocation = Sys.UI.DomElement.getLocation(rowElement);
  Sys.UI.DomElement.setLocation($get(subDetailsDivID), 
                                currLocation.x+rowElement.firstChild.offsetWidth, 
                                currLocation.y+rowElement.firstChild.offsetHeight);
                                
  //if the SubDetails Grid is already shown , hide it 
  if( _currentSubDetailsRowID === cellElement ) {
    $get(subDetailsDivID).style.display =  $get(subDetailsDivID).style.display == "block" ?"none":"block" ;
    return;
  } else {
     $get(subDetailsDivID).style.display =  "block";
  }
  
  
  var columnSpecifications = {Columns:[{headerName:"ProductID",dataFieldName:"ProductID",noAction:false,Style:{Width:"60px"}},
                                    {headerName:"UnitPrice",dataFieldName:"UnitPrice",noAction:false,Style:{Width:"60px"}},
                                    {headerName:"ProductName",dataFieldName:"ProductName",noAction:false,Style:{Width:"120px"}},
                                    {headerName:"UnitsInStock",dataFieldName:"UnitsInStock",noAction:false,Style:{Width:"120px"}},
                                    {headerName:"QuantityPerUnit",dataFieldName:"QuantityPerUnit",noAction:false,Style:{Width:"140px"}},
                                    {headerName:"Discontinued",dataFieldName:"Discontinued",noAction:false,Style:{Width:"80px"}}]};
                                    
                                    
//                var columnSpecifications = {Columns:[{headerName:"Click",dataText:"Products",noAction:true,Style:{Width:"60px"},subDataTableId:"tblSubDataTable",subDetailsDivID:"divSubDetails"},
//                                       {headerName:"Supplier ID",dataFieldName:"SupplierID",noAction:false,columnType:AjaxGrid.ColumnTypes.Label},
//                                       {headerName:"CompanyName",dataFieldName:"CompanyName",noAction:false,columnType:AjaxGrid.ColumnTypes.Label},
//                                       {headerName:"ContactName",dataFieldName:"ContactName",noAction:false,columnType:AjaxGrid.ColumnTypes.Label},
//                                       {headerName:"ContactTitle",dataFieldName:"ContactTitle",noAction:false,columnType:AjaxGrid.ColumnTypes.Label},
//                                       {headerName:"Address",dataFieldName:"Address",noAction:false,columnType:AjaxGrid.ColumnTypes.Label},
//                                       {headerName:"City",dataFieldName:"City",noAction:false,columnType:AjaxGrid.ColumnTypes.Label}]};
                                  
 var rowTemplates = { EmptyRowTemplate : 
                        {CssClass:"actionsHeader",Columns:[
                                {type:"text",text:"No"},
                                {type:"text",text:"Data"},
                                {type:"html",html:"Available <img src='images/xmag.png'/>"}]
                         },
                       FooterTemplate : 
                       {CssClass:"actionsHeader",
                        ColSpan:"6",
                        Columns : [
                                {type:"text",text:"Footer Row"}
                                  ]
                        }   
                      };                                    
  BindGrid(_subDetailsData,"tblSubDataTable",columnSpecifications,false,"",rowTemplates)
  _currentSubDetailsRowID = cellElement;
}

function selectRow(rowElement) {
    if( _prevSelectedRow !== null) {
        _prevSelectedRow.className = _prevSelectedRow._origclassName;
    }
    if( _prevSelectedRow === rowElement ) return;
    rowElement._origclassName = rowElement.className;
    rowElement.className = rowElement.className == "gridSelectedRowGB" ? "": "gridSelectedRowGB" ;
    _prevSelectedRow = rowElement;
}
function addnewRow(eventArgs) {
    eventArgs = eventArgs === null ? eventArgs : window.event;  
    //Sys.Debug.fail("Debug BP");
    var currLocation = Sys.UI.DomElement.getLocation(eventArgs.srcElement);
    var _newRowAdditionDiv = $get("divAddNewRow");
    var _cellElement = _findParentCell( eventArgs.srcElement );
    
    //Return state to original 
    _newRowAdditionDiv.style.display = _newRowAdditionDiv.style.display == "block" ?"none":"block" ;
    //Change state to show the add new row dialog.
    _cellElement.className = _newRowAdditionDiv.style.display == "block" ?"addNewRowCellHighlight":"actionsHeader" ; 
    
    Sys.UI.DomElement.setLocation(_newRowAdditionDiv, 
                                30, 
                                currLocation.y+eventArgs.srcElement.offsetHeight);
}

function generateNewRowTemplate( columnSpecification ) {
    
}

function _findParentCell( element ) {
    if (element === null ) {
        return null;
    }
    if ( element.tagName == 'TD' || element.tagName == 'TH' ) {
        return element;
    }
   return _findParentCell( element.parentElement );
 }